<template>
  <div class="first-page-wrapper">
    <header class="login-header" style="margin-top: 20px">
      <div >
      <img src="../assets/wqj.png" height="128" width="256" alt="WQJ-Lab"/>
      </div>
      <!-- Dialog for Login/Register -->
    <div>
      <el-dialog :visible="showDialog" @close="showDialog = false">
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane label="登录" name="login">
          <el-form :model="loginForm" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="loginForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="loginForm.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <el-form :model="registerForm" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="registerForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="registerForm.password" type="password"></el-input>
            </el-form-item>
            <!-- Add other registration fields as needed -->
            <el-form-item>
              <el-button type="primary" @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    </div>
    </header>
    <div class="first-page-content">
      <div class="logo">
        <img src="../assets/logo.png"  alt="logo"/>
      </div>
      <div class="slogan">
        <div class="slogan-text" style="margin-top: 25px">基于百度飞浆医疗数据智能解析平台</div>
      </div>
      <div>
        <el-button type="primary"  @click="showDialog = true" style="margin-top: 20px">开始使用</el-button>
      </div>
    </div>





  </div>
</template>


<script>

import axios from 'axios';


export default {
  name: "firstPage",
  data() {
    return {
      showDialog: false,
      activeTab: 'login', // Default to show login tab
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: ''
      }

    };
  },
  methods: {

    navigateToHome() {
      // Use this.$router.push() to navigate to the desired route
      this.$router.push({path: '/datalist/'}); // Replace "home" with the name of your target route
    },
    login() {
      // Perform login API call to your backend server
      axios.post('/login', this.loginForm)
        .then(response => {
          const responseData = response.data; // 后端返回的JSON数据
          if (responseData.message === '登录成功') {
            // 登录成功，关闭对话框，导航到主页等操作
            this.$message.success("信息验证成功");


            this.showDialog = false;
            this.$router.push({ path: '/datalist/' });
          } else {
            // 登录失败，根据后端返回的message显示错误消息
            console.error('登录失败:', responseData.message);
            this.$message.error("校验失败，请重新登陆！");


            // 可以在这里显示错误消息给用户
          }
        })
        .catch(error => {
          // Handle login error (e.g., show error message)
          console.error(error);
          // You may want to show an error message to the user here
        });
    },

    register() {
      // Perform registration API call to your backend server
      axios.post('/register', this.registerForm)
        .then(response => {
          // Assuming the backend returns a success message upon successful registration
          // You can handle the successful registration behavior here (e.g., show a success message to the user)
          this.showDialog = false; // Close the dialog after successful registration
        })
        .catch(error => {
          // Handle registration error (e.g., show error message)
          console.error(error);
          // You may want to show an error message to the user here
        });
    }

  }
};
</script>

<style scoped>
.first-page-wrapper {
  color: #181818;
  background-color: #fdfdfe;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  --font-count: 16;
}

.first-page-wrapper .login-header {
  height: 50px;
  width: 100%;
  padding: 20px 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.first-page-wrapper .first-page-content {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.first-page-wrapper .first-page-content .slogan {
  position: relative;
}

.first-page-wrapper .first-page-content .slogan .slogan-text {
  overflow: hidden;
  white-space: nowrap;
  font-size: 2rem;
  animation: typing 2s steps(var(--font-count)) forwards;
}

.first-page-wrapper .first-page-content .slogan::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0.3rem;
  right: -0.6rem;
  width: 0.6rem;
  height: 0.2rem;
  background: #181818;
  animation: blink 1.1s linear infinite;
}

@keyframes blink {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 100%;
  }
}

@keyframes typing {
  0% {
    width: 0;
  }
  100% {
    width: calc(var(--font-count) * 2rem);
  }
}
</style>
